<script setup lang="ts">
import ScreenAdapter from '@/components/ScreenAdapter.vue'
import Icon1 from '@/assets/deviceImages/组 10.png'
import Icon2 from '@/assets/deviceImages/组 10(1).png'
import Icon3 from '@/assets/deviceImages/组 10(2).png'
import Icon4 from '@/assets/deviceImages/组 10(3).png'
import EchartsBox from '@/components/Echarts.vue'
import { setMonitorPieOption, setOnlineBarOption, setOnlinePieOption } from '@/views/home/deviceOptions'
import DeviceIndexMap from '@/components/deviceIndexMap.vue'
import gaodeMap from '@/components/gaodeMap.vue'
import { ref, watch, onBeforeUnmount } from 'vue'
// 用于跟踪定时器 ID 的状态
const intervalId = ref<number | null>(null)
// 刷新页面的函数
const refreshPage = () => {
	location.reload()
}
// 当组件挂载时启动定时刷新功能
onMounted(() => {
	// 设置定时器，每隔 5 分钟（300000 毫秒）刷新页面一次
	intervalId.value = setInterval(refreshPage, 300000)
})
// 当组件卸载时清除定时器，以防止内存泄漏
onBeforeUnmount(() => {
	if (intervalId.value !== null) {
		clearInterval(intervalId.value)
	}
})
//内嵌菜单
const selectedKeys = ref<string[]>(['1'])
const openKeys = ref<string[]>(['sub1'])

const handleClick = (e: Event) => {
	console.log('click', e)
}

const titleClick = (e: Event) => {
	console.log('titleClick', e)
}

watch(openKeys, val => {
	console.log('openKeys', val)
})
//遍历group-box1数据
const dataList = ref([
	{
		imgSrc: Icon1,
		text: '规上企业数',
		num: '2,321,320'
	},
	{
		imgSrc: Icon2,
		text: '监测企业数',
		num: '421,320'
	},
	{
		imgSrc: Icon3,
		text: '监测设备总数',
		num: '321,320'
	},
	{
		imgSrc: Icon4,
		text: '在线设备总数',
		num: '21,320'
	}
])
//监测占比饼图
const monitorPieOption = setMonitorPieOption()
//在线率饼图
const onlinePieOption = setOnlinePieOption()
//设备在线柱状图
const onlineBarOption = setOnlineBarOption()
</script>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { MailOutlined, QqOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue'
//设置鼠标悬停柱状图钩子
export default defineComponent({
	components: {
		MailOutlined,
		AppstoreOutlined,
		SettingOutlined
	}
})
</script>
<template>
	<div>
		<screen-adapter>
			<!--主页-->
			<div class="home">
				<!--顶部-->
				<div class="top-box">
					<div class="top-left">
						<img src="src/assets/deviceImages/71551687162112_.pic.png" />
					</div>
					<div class="top-right"></div>
				</div>
				<!--底部-->
				<div class="bottom-box">
					<div class="bottom-left">
						<a-menu
							id="dddddd"
							style="width: 256px"
							v-model:openKeys="openKeys"
							v-model:selectedKeys="selectedKeys"
							mode="inline"
							@click="handleClick"
						>
							<a-menu-item key="sub1" @titleClick="titleClick">
								<MailOutlined />
								<span>首页</span>
							</a-menu-item>
							<a-sub-menu key="sub2" @titleClick="titleClick">
								<template #icon>
									<AppstoreOutlined />
								</template>
								<template #title>离线报警</template>
								<a-menu-item key="1">连续5日离线报警</a-menu-item>
								<a-menu-item key="2">实时离线</a-menu-item>
							</a-sub-menu>
							<a-sub-menu key="sub3" @titleClick="titleClick">
								<template #icon>
									<SettingOutlined />
								</template>
								<template #title>报警工单</template>
								<a-menu-item key="3">工单管理</a-menu-item>
								<a-menu-item key="4">国网联系人</a-menu-item>
								<a-menu-item key="5">经信专员</a-menu-item>
								<a-menu-item key="6">处置月报</a-menu-item>
							</a-sub-menu>
							<a-sub-menu key="sub4" @titleClick="titleClick">
								<template #icon>
									<SettingOutlined />
								</template>
								<template #title>监测报表</template>
								<a-menu-item key="7">电表安装月报</a-menu-item>
								<a-menu-item key="8">5日连续离线周报</a-menu-item>
								<a-menu-item key="9">离线分析日报</a-menu-item>
							</a-sub-menu>
						</a-menu>
					</div>
					<div class="bottom-right">
						<div class="right-box1">
							<!--							<div class="gaodemap">-->
							<!--								<gaode-map />-->
							<!--							</div>-->
							<!--总览-->
							<div class="total-box">
								<div class="total-text">监测总览</div>
								<div class="total-name">全市总电量</div>
								<div class="total-num">23,21,320</div>
							</div>
							<!--中间板块-->
							<div class="group-box">
								<div v-for="(item, index) in dataList" :key="index" class="group-box1">
									<img :src="item.imgSrc" />
									<span class="text">{{ item.text }}</span>
									<span class="num">{{ item.num }}</span>
								</div>
							</div>
							<!--监测占比饼图-->
							<div class="echarts-box">
								<div class="echarts-box1">
									<EchartsBox :id="'monitorPieOption'" :width="'100%'" :options="monitorPieOption" :height="'100%'" />
								</div>
								<div class="echarts-box1">
									<EchartsBox :id="'onlinePieOption'" :width="'100%'" :options="onlinePieOption" :height="'100%'" />
								</div>
							</div>
							<!-- 设备在线率日趋势图-->
							<div class="day-box">
								<div class="online-box">
									<div class="num">6324</div>
									<div class="text">点位实时在线</div>
								</div>
								<div class="onlineecharts-box">
									<EchartsBox :id="'onlineBarOption'" :width="'100%'" :options="onlineBarOption" :height="'100%'" />
								</div>
							</div>
							<device-index-map />
						</div>
					</div>
				</div>
			</div>
		</screen-adapter>
	</div>
</template>

<style scoped lang="scss">
@import '@/assets/scss/mixins.scss';
.home {
	@include wh(100%, 100%);
	position: relative;
	.top-box {
		@include wh(100%, 7%);
		display: flex;
		.top-left {
			@include wh(13%, 100%);
			background: #736bcb;
			//border: solid 1px yellow;
			img {
				@include wh(200px, 50px);
				margin-left: 23px;
				margin-top: 14px;
			}
		}
		.top-right {
			@include wh(87%, 100%);
			//border: solid 1px green;
		}
	}
	.bottom-box {
		@include wh(100%, 93%);
		display: flex;
		.bottom-left {
			@include wh(13%, 100%);
			//border: solid 1px green;
		}
		.bottom-right {
			@include wh(87%, 100%);
			//border: solid 1px yellow;
			background: #fafafa;
			.right-box1 {
				margin-left: 15px;
				margin-top: 15px;
				@include wh(1620px, 980px);
				background: rgba(246, 247, 254, 0.8) url('src/assets/deviceImages/图层 5.png') no-repeat;
				//background: #2fc7ff;
				background-size: 100% 100%;
				overflow: hidden;
				position: relative;
				//.gaodemap {
				//	@include wh(1600px, 980px);
				//	position: absolute;
				//	z-index: 1;
				//}
				.total-box {
					@include wh(341px, 190px);
					margin-top: 39px;
					margin-left: 41px;
					//background: #2fc7ff;
					position: relative;
					z-index: 2;
					.total-text {
						position: absolute;
						@include fontMixin(44px, bold, #333333);
						font-family: 'PingFang SC';
						top: -10px;
					}
					.total-name {
						position: absolute;
						@include fontMixin(21px, 500, #333333);
						top: 80px;
					}
					.total-num {
						position: absolute;
						@include fontMixin(70px, bold, #18184f);
						font-family: DINAlternate-Bold;
						bottom: -18px;
					}
				}
				.group-box {
					@include wh(464px, 205px);
					margin-top: 86px;
					margin-left: 35px;
					//background: red;
					display: flex;
					flex-wrap: wrap;
					z-index: 2;
					position: relative;
					.group-box1 {
						@include wh(232px, 80px);
						//border: 1px solid green;
						&:nth-child(n + 3) {
							margin-top: 0;
						}
						&:nth-child(-n + 2) {
							margin-bottom: 42px;
						}
						position: relative;
						img {
							@include wh(79px, 79px);
						}
						.text {
							position: absolute;
							@include fontMixin(17px, Medium, #333333);
							font-family: 'PingFang SC';
							left: 85px;
							top: 5px;
						}
						.num {
							position: absolute;
							@include fontMixin(23px, Bold, #18184f);
							font-family: DINAlternate-Bold;
							bottom: 5px;
							left: 85px;
						}
					}
				}
				.echarts-box {
					@include wh(456px, 102px);
					margin-top: 108px;
					margin-left: 35px;
					//border: 1px solid red;
					display: flex;
					position: relative;
					z-index: 2;
					.echarts-box1 {
						@include wh(228px, 102px);
						//border: 1px solid green;
					}
				}
				.day-box {
					@include wh(1560px, 90px);
					margin-top: 100px;
					margin-left: 20px;
					border-radius: 10px;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 20px rgba(214, 216, 242, 0.6);
					display: flex;
					position: relative;
					z-index: 2;
					.online-box {
						@include wh(180px, 100%);
						//border: 1px solid red;
						position: relative;
						.num {
							@include fontMixin(21px, Medium, #9f9ead);
							font-family: 'PingFang SC';
							position: absolute;
							top: 15px;
							left: 40px;
						}
						.text {
							@include fontMixin(17px, Bold, #736bcb);
							font-family: 'PingFang SC';
							position: absolute;
							bottom: 15px;
							left: 40px;
						}
					}
					.onlineecharts-box {
						@include wh(1460px, 100%);
						//border: 1px solid red;
					}
				}
			}
		}
	}
}
</style>
